import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.less";
import "slick-carousel/slick/slick-theme.less";
import './banner.less';
import API from '../../../api/index';
class Banner extends React.Component {
    state = {
        bannerList: []
    }
    render() {
        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1
        };
        return <div className='banner'>
            <div className="banner_box">
                <Slider {...settings}>
                    {
                        this.state.bannerList.map(
                            (item, index) => {
                                return <div key={index}>
                                    <a href={item.hrefUrl}><img src={item.imageUrl} alt="" />
                                    </a>
                                </div>
                            }
                        )
                    }
                </Slider>
                <div className="download">
                    <a href="#" className="downBtn">下载客户端</a>
                    <p className="downtext">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
            </div>
        </div>;
    }
    componentDidMount() {
        API.myIndex.banner().then(data => {
            let result = data.banners;
            this.setState({
                bannerList: result.map(item => {
                    var bannerObj = {
                        hrefUrl: item.url,
                        imageUrl: item.imageUrl,
                    }
                    return bannerObj;
                })
            })
        })

    }
}
export default Banner